<template is="msgItem1">
	<view class="content">
		
		<view class="upload-example">
			<view class="title">{{hb.desc}}</view>
			<img class="upload-img" :src="url + hb.pic" alt="">
		</view>
		
		<view class="already">已领{{hb.r_num}}/{{hb.num}}个，剩余{{num}}个/{{hb.surplus}}元</view>
		
		<view class="upload-example">
			<view class="title">我的照片</view>
			<img class="onclickimg" v-bind:src="uploadimg" @click="imageUp">
			<!-- <view class="onclickimg"><img v-bind:src="uploadimg" @click="imageUp"></view> -->
		</view>
		
		<view class="gotophoto" @click="gotolingqu"><img src="/static/paizhao.png"><view class="title">确定上传</view></view>
		
		<button class="gotophotobutton" open-type="share"><img src="/static/fenxiang.png"><view class="title">分享红包</view></button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				number_min:"1",
				number_max:"10",
				money_min:"9",
				money_max:"30.53",
				uploadimg:"/static/paizhaobg.png",
				
				hb:"",
				num:"",
				id:"",
				token:"",
				url:""
			}
		},
		onShareAppMessage(res) {
			var _self = this
		    if (res.from === 'share') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '来拍吧',
		      path: '/pages/index/takephotos?id=' + _self.id,
			  // imageUrl:"/static/ceshi.jpg"
		    }
		  },
		onLoad(options) {
			var _self = this
			_self.id = options.id
			_self.url = _self.$url
			uni.checkSession({
				success () {
					
					const value = uni.getStorageSync('userinfo');
					if (value) {
						_self.userinfo = value
						_self.token = value.token
					}
					uni.request({
					    url: _self.$url + '/api/lucky_money/luckyMoneyDetail', 
						method:"post",
					    data: {
					       id:_self.id
					    },
						header: {
							'token': _self.token 
						},
					    success: (res) => {
							_self.hb = res.data.result.data
							_self.num = _self.hb.num - _self.hb.r_num
							
					    }
					});
				},
				fail () {
				  uni.navigateTo({
					  url: '/pages/index/authorization',
					  animationType: 'pop-in',
					  animationDuration: 200
				  });
				}
				
			})
		},
		methods: {
			imageUp:function(event){
				var _self = this
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album'], //从相册选择
				    success: function (res) {
						_self.uploadimg = res.tempFilePaths[0]
						uni.uploadFile({
							url: _self.$url + '/api/lucky_money/picUpload', //仅为示例，非真实的接口地址
							filePath: _self.uploadimg,
							name: 'pic_file',
							header: {
								'token': _self.userinfo.token ,//自定义请求头信息
								'content-type':"multipart/form-data"
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes.data);
								var newj = JSON.parse(uploadFileRes.data);
								console.log(newj)
								_self.uploadimg = _self.url + newj.result.file
								console.log(_self.uploadimg)
							}
						});
				    }
				});
			},//图片上传
			gotolingqu(){
				var _self = this
				uni.request({
				    url: _self.$url + '/api/lucky_money/receiveLuckyMoney', 
					method:"post",
				    data: {
				       id:_self.id,
					   pic:_self.uploadimg
				    },
					header: {
						'token': _self.token 
					},
				    success: (res) => {
						if(res.data.result == 1){
							uni.showToast({
							    title: res.data.msg,
							    duration: 3000,
								icon:"none",
								mask:true,
								success() {
									uni.navigateTo({
									  url: '/pages/index/receive?id=' + _self.id,
									  animationType: 'pop-in',
									  animationDuration: 200,
									  success() {
									  	uni.navigateTo({
										  url: '/pages/index/receive',
										  animationType: 'pop-in',
										  animationDuration: 200
									  	});
									  }
									});
								}
							});
						}else{
							uni.showToast({
							    title: res.data.msg,
							    duration: 3000,
								icon:"none",
								mask:true
							});
						}
						
				    }
				});
			}
			
		}
	}
</script>

<style lang="scss">
	body{
		background: #F3F3F3;
		font-size: 14px;
	}
	view{
		box-sizing: border-box;
	}
	.upload-example{
		width: 90%;
		box-sizing: border-box;
		margin:50rpx auto;
		background: #fff;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			margin:40rpx 0 40rpx 0;
			font-size: 16px;
		}
		.upload-img{
			width: 400rpx;
			height: 400rpx;
			margin-bottom:40rpx;
		}
		.onclickimg{
			width: 400rpx;
			height: 400rpx;
			margin-bottom:40rpx;
		}
	}
	.already{
		width: 100%;
		margin:40rpx 0;
		text-align: center;
	}
	.gotophoto{
		width: 90%;
		margin: 0 auto;
		background: #F4313E;
		text-align: center;
		border-radius: 5px;
		color: #fff;
		padding:20rpx 0;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin:40rpx;
		img{
			width: 50rpx;
			height: 50rpx;
			margin-right:20rpx;
		}
	}
	.gotophotobutton{
		width: 90%;
		margin: 0 auto;
		background: #F4313E;
		text-align: center;
		border-radius: 5px;
		color: #fff;
		padding:10rpx 0;
		font-size: 14px;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin:40rpx;
		img{
			width: 50rpx;
			height: 50rpx;
			margin-right:20rpx;
		}
	}
</style>
